<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="4">
                <el-row>
                    <el-button type="danger" @click="add">添加</el-button>
                </el-row>
            </el-col>
            <el-col :span="6">
                <el-form ref="form" :model="params" label-width="80px">
                    <el-form-item label="关键字">
                        <el-input v-model="params.keywords" placeholder="请输入关键字" @change="getData" @keyup.enter="getData"></el-input>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <!--<hr/>-->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="albumId" label="ID" width="50"></el-table-column>
            <el-table-column prop="album.title" label="标题" width="150"></el-table-column>
            <el-table-column prop="album.describe" label="描述" width="300"></el-table-column>
            <el-table-column label="图片">
                <template slot-scope="scope">
                    <img class="img-test" v-for="file in scope.row.files" :src="prefix + file.filePath">
                </template>
            </el-table-column>
            <el-table-column prop="album.describe" label="创建时间" width="150">
                <template slot-scope="scope">
                    {{dateUtil.formatDate(scope.row.album.createTime)}}
                </template>
            </el-table-column>
            <el-table-column prop="album.describe" label="修改时间" width="150">
                <template slot-scope="scope">
                    {{scope.row.album.modifyTime?dateUtil.formatDate(scope.row.album.modifyTime):''}}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <!--<el-button @click="viewsDetails(scope.row)" type="text" size="small">查看</el-button>-->
                    <el-button @click="editData(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="deleteData(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <hr/>
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="params.page"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="params.rows"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>

    'use strict';

    import httpUtil from '../../utils/js/HttpUtil'
    import dateUtil from '../../utils/js/DateUtil'

    export default {
        name: "List",
        props: {},
        data() {
            return {
                httpUtil,
                dateUtil,
                tableData: [],
                params: {
                    page: 1,
                    rows: 5,
                    keywords: ''
                },
                total: 0,
                prefix: 'http://' + window.location.hostname + ':8889/'
            }
        },
        computed: {},
        methods: {
            viewsDetails(row) {
                console.log(row);
            },
            editData(row) {
                this.$router.push({
                    path: `/edit/${row.albumId}`,
                })
            },
            deleteData(row) {
                this.httpUtil.xhrAll(this, [
                    this.httpUtil.xhrObject(httpUtil.getParam().RequestMethod.POST, 'album/deleteAlbum', {
                        albumId: row.albumId
                    })
                ], (data) => {
                    this.$message.success(data.message);
                    this.getData();
                })
            },
            add() {
                this.$router.push({
                    path: 'add',
                })
            },
            getData() {
                this.httpUtil.xhrAll(this, [
                    this.httpUtil.xhrObject(httpUtil.getParam().RequestMethod.GET, 'album/getAlbums', this.params)
                ], (data) => {
                    this.tableData = data.data.list;
                    this.total = data.data.total;
                    this.params.page = data.data.pageNum;
                    this.params.rows = data.data.pageSize;
                });
            },
            handleSizeChange(val) {
                this.params.rows = val;
                this.getData();
            },
            handleCurrentChange(val) {
                this.params.page = val;
                this.getData();
            }
        },
        created() {
        },
        mounted() {
            this.getData();
        }
    }

</script>

<style scoped>
    .img-test{
        max-height: 100px;
        display: inline-block;
        margin: 0 4px;
    }
</style>
